<script setup lang="ts">
import { useAutoAnimate } from '@formkit/auto-animate/vue'
const props = withDefaults(
  defineProps<{
    duration?: number
    easing?: string
  }>(),
  {
    duration: 250,
    easing: 'ease-in-out',
  },
)

const [animateRef] = useAutoAnimate({
  duration: props.duration,
  easing: props.easing,
  disrespectUserMotionPreference: false,
})
</script>

<template>
  <div ref="animateRef" class="auto-animate" v-bind="$attrs">
    <slot></slot>
  </div>
</template>

<style scoped lang="scss">
.auto-animate {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: all 0.5s;
}
</style>
